<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container" id="login-box">


    <div class="form-container sign-up-container">
        <form>
            <h1>注册</h1>
            <div class="txtb">
                <input type="text">
                <span data-placeholder="name" ></span>
            </div>
            <div class="txtb">
                <input type="email">
                <span data-placeholder="Email" ></span>
            </div>
            <div class="txtb">
                <input type="number">
                <span data-placeholder="number" ></span>
            </div>
            <div class="txtb">
                <input type="password">
                <span data-placeholder="Password" ></span>
            </div>
            <button>注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="#">
            <h1>登录</h1>
            <div class="txtb">
                <input type="email">
                <span data-placeholder="Email" ></span>
            </div>
            <div class="txtb">
                <input type="password" >
                <span data-placeholder="Password"></span>
            </div>
            <button>登录</button>
        </form>
    </div>

    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有账号？</h1>
                <p>请使用您的账号进行登录</p>
                <button class="ghost" id="signIn" >登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有账号?</h1>
                <p>立即注册加入我们，和我们一起开始旅程吧</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>

    </div>
</div>
</body>
<script>
    $("#signUp").click(function(){
        $("#login-box").addClass('right-panel-active')
    })

    $("#signIn").click(function(){
        $("#login-box").removeClass('right-panel-active')
    })

    $(".txtb input").on("focus",function(){
        $(this).addClass("focus")
    })

    $(".txtb input").on("blur",function(){
        if($(this).val() == '')
        $(this).removeClass("focus")
    })

    // 显示消息
    function displayMessage(msg) {
        const messageElement = document.getElementById('message');
        messageElement.innerText = msg;
        setTimeout(() => {
            messageElement.innerText = '';
        }, 3000); // 3秒后清除消息
    }

    // 处理注册表单提交
    document.getElementById('registrationForm').addEventListener('signUp', function(event) {
        event.preventDefault();

        // 检查输入字段是否包含空格
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const contactInfo = document.getElementById('contactInfo').value.trim();
        const password = document.getElementById('password').value.trim();
        const address = document.getElementById('address').value.trim();

        if (name.includes(' ') || email.includes(' ') || contactInfo.includes(' ') || password.includes(' ') || address.includes(' ')) {
            displayMessage('注册信息中不能包含空格。');
            return; // 阻止表单提交
        }

        const userData = {
            name: name,
            email: email,
            contactInfo: contactInfo,
            password: password,
            address: address
        };

        fetch('/users', { // 确保端点 URL 正确
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userData)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                displayMessage('注册成功！请登录。');
                document.getElementById('registrationForm').reset();
                document.getElementById('registrationSection').style.display = 'none';
                document.getElementById('loginSection').style.display = 'block';
            })
            .catch(error => {
                displayMessage('注册失败，请重试。');
                console.error('Error:', error);
            });
    });

    // 处理登录表单提交
    document.getElementById('loginForm').addEventListener('signIn', function(event) {
        event.preventDefault();

        const loginData = {
            email: document.getElementById('loginEmail').value,
            password: document.getElementById('loginPassword').value
        };

        fetch('/users/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(loginData)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data && data.userId) {
                    displayMessage('登录成功！');
                    console.log('登录人信息：', data); // 输出登录人信息到控制台

                    // 设置Cookie来存储用户ID
                    document.cookie = `user_id=${data.userId}; path=/; secure; HttpOnly; SameSite=Strict`;

                    // 重定向到个人中心页面
                    window.location.href = 'page1.htm';
                } else {
                    displayMessage('登录失败，用户名或密码错误。');
                }
            })
            .catch(error => {
                displayMessage('登录失败，请重试。');
                console.error('Error:', error);
            });
    });

</script>
</html>
